<template>
  <el-menu
      active-text-color="#ffd04b"
        background-color="#545c64"
        text-color="#fff"
        class="el-menu-vertical-demo"
        default-active="2"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>文本生成图像</span>
          </template>
          <el-menu-item-group title="Group One">
            <el-menu-item index="1-1">item one</el-menu-item>
            <el-menu-item index="1-2">item two</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3">item three</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title>item four</template>
            <el-menu-item index="1-4-1">item one</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="2">
          <el-icon><IconMenu /></el-icon>
          <span @click="jumpToPortraitRepaint">人像重绘</span>
        </el-menu-item>
        <el-menu-item index="3">
          <el-icon><IconMenu /></el-icon>
          <span>图像背景生成</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><IconMenu  /></el-icon>
          <span>涂鸦作画</span>
        </el-menu-item>
      </el-menu>
</template>

<script>
import { defineComponent } from "vue";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";

export default defineComponent({
  setup() {

    return {
        Document,
        IconMenu,
        Location,
        Setting,
    };
  },
  methods: {
    jumpToPortraitRepaint() {
        this.$router.push("/portraitRepaint")
    },
  },
});
</script>
